<template>
	<view class="image-swiper">
		<view class="img-list" @touchstart="startMove" @touchend="endMove">
			<view class="img-item"
				:class="{item1:i.class=='item1',item2:i.class=='item2',item3:i.class=='item3',item4:i.class=='item4',item5:i.class=='item5'}"
				v-for="i of imglist" :key="i.id">
				<image class="img" :src="i.imageUrl" mode="aspectFill">
				</image>
				<view class="delete" v-if="showDelete&&i.class=='item3'" @click="deleteItem">
					×
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "image-swiper",
		props: {
			list: {
				type: Array,
				default: () => {
					[]
				}
			},
			showDelete: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
				imglist: [],
				chooseIndex: 0,
				timer: null,
				slideNote: {
					x: 0,
					y: 0
				},
			};
		},
		watch: {
			list(newValue, oldValue) {
				this.setList()
			},
		},
		methods: {
			setList(index) {
				this.imglist = []
				this.chooseIndex = index || 0

				this.imglist = this.list.map(item => {
					return {
						...item,
						class: ''
					}
				})
				if (this.imglist.length == 0) {
					return
				}
				this.changeItem()
			},
			// 向左滑动index+
			left() {
				this.chooseIndex++
				if (this.chooseIndex > this.imglist.length - 1) {
					this.chooseIndex = 0
				}
				this.changeItem()
			},
			// 向右滑动index-
			right() {
				this.chooseIndex -= 1
				if (this.chooseIndex < 0) {
					this.chooseIndex = this.imglist.length - 1
				}
				this.changeItem()
			},
			// 点击删除
			deleteItem(){
				this.$emit('delete',this.list[this.chooseIndex],this.chooseIndex)
			},
			changeItem() {
				let c1 = this.chooseIndex == 1 ? this.imglist.length - 1 : this.chooseIndex == 0 ? this.imglist.length -
					2 : this
					.chooseIndex - 2
				let c2 = this.chooseIndex == 0 ? this.imglist.length - 1 : this.chooseIndex - 1
				let c3 = this.chooseIndex
				let c4 = this.chooseIndex == this.imglist.length - 1 ? 0 : this.chooseIndex + 1
				let c5 = this.chooseIndex == this.imglist.length - 1 ? 1 : this.chooseIndex == this.imglist.length - 2 ?
					0 : this
					.chooseIndex + 2
				let arr = [c1, c2, c3, c4, c5]
				// 根据不同数目调整样式
				if (this.imglist.length == 4) {
					arr = ['', c2, c3, c4, c5]
				} else if (this.imglist.length == 3) {
					arr = ['', c2, c3, c4, '']
				} else if (this.imglist.length == 2) {
					arr = ['', '', c3, c4, '']
				} else if (this.imglist.length == 1) {
					arr = ['', '', c3, '', '']
				}

				this.$nextTick(() => {
					for (let i = 0; i < this.imglist.length; i++) {
						if (arr.includes(i)) {
							this.imglist[i].class = 'item' + (arr.indexOf(i) + 1)
						} else {
							this.imglist[i].class = ''
						}
					}
				})
				this.$emit('change', this.list[this.chooseIndex])
			},
			startMove(e) {
				clearInterval(this.timer);
				this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			},
			endMove(e) {
				if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
					// 向左滑动
					this.left()
				} else if ((e.changedTouches[0].pageX - this.slideNote.x) > 0) {
					// 向右滑动
					this.right()
				}
			},
		},
		created() {
			this.setList()
		}
	}
</script>

<style lang="scss">
	.image-swiper {
		width: 100%;
		height: 380rpx;

		.img-list {
			height: 100%;
			width: 465rpx;
			position: relative;
			margin: auto;

			.img-item {
				background-color: #fff;
				position: absolute;
				height: 350rpx;
				width: 350rpx;
				top: 20rpx;
				left: calc(50% - 175rpx);
				transform: scale(0.7);
				z-index: -1;
				transition: 0.2s;
				box-shadow: 1rpx 1rpx 14rpx 0rpx #000;
				opacity: 0;
				border-radius: 17rpx;
				overflow: hidden;

				&.item1 {
					transform: scale(0.6);
					left: calc(50% - 320rpx);
					z-index: 3;
					opacity: 1;
				}

				&.item2 {
					transform: scale(0.8);
					left: calc(50% - 250rpx);
					z-index: 4;
					opacity: 1;
				}

				&.item3 {
					transform: scale(1);
					z-index: 5;
					opacity: 1;
				}

				&.item4 {
					transform: scale(0.8);
					left: calc(50% - 100rpx);
					z-index: 4;
					opacity: 1;
				}

				&.item5 {
					transform: scale(0.6);
					left: calc(50% - 30rpx);
					z-index: 3;
					opacity: 1;
				}

				.img {
					height: 100%;
					width: 100%;
				}

				.delete {
					height: 43rpx;
					width: 43rpx;
					background: #333333;
					color: #fff;
					font-size: 43rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					text-align: center;
					line-height: 37rpx;
					border-radius: 50%;
					opacity: 0.8;
				}
			}
		}
	}
</style>